<template>
    <div style="padding:0 10px">
        <div class="header">
            <quota-query @comReturn="comReturn" @handleButton="handleButton" tabName="special"></quota-query>
        </div>
        <div>
            <el-table
                :header-cell-style="handleHeaderStyle"
                :cell-style="{ borderColor: '#d7d7d7', padding: '0' }"
                :row-style="{ height: '35px' }"
                :header-row-style="{ height: '35px', padding: '5px 0', color: '#555555' }"
                :data="tableData"
                :key="tableKey + 'tableKey'"
                v-loading="loading"
                height="calc(100vh - 185px)"
                border
                ref="table"
                style="width:100%"
            >
                <el-table-column
                    v-for="item in tableColumns"
                    :label="item.content"
                    :key="item.content"
                    :prop="item.id"
                    :min-width="item.minWidth || '90'"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span v-if="['gurBond', 'conform'].includes(item.id)">
                            {{ scope.row[item.id] == '1' ? '是' : '否' }}
                        </span>
                        <span v-else-if="['creditRemainBanlace', 'limitBanlance', 'remainBanlace', 'ruleRemainBanlace'].includes(item.id)">
                            {{ numberFormat(scope.row[item.id], 4) || '--' }}
                        </span>
                        <span v-else>
                            {{ scope.row[item.id] === 0 || (scope.row[item.id] && (scope.row[item.id] + '').trim()) ? scope.row[item.id] : '--' }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <risk-pagination :paging="page" @page-change="pageRet"></risk-pagination>
        </div>
    </div>
</template>
<script lang="ts">
import RiskPagination from '@/common/components/risk-pagination.vue';
import { downLoadFile } from '@/utils/request';
import { dateFormat, numberFormat } from '@/utils/tools';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import XEUtils from 'xe-utils';
import QuotaQuery from './quota-query.vue';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({ name: 'special', components: { QuotaQuery, RiskPagination } })
export default class special extends Vue {
    @Prop() activeValue: string;

    dateFormat = dateFormat;
    numberFormat = numberFormat;

    isOpen: boolean = false;

    tableData: any[] = [];

    sortableObj = {};

    tableColumns = [
        { id: 'reportCode', content: '债券代码', minWidth: '90' },
        { id: 'stockName', content: '债券名称', minWidth: '110' },
        { id: 'marketCode', content: '市场', minWidth: '70' },
        { id: 'gurBond', content: '是否担保债', minWidth: '100' },
        { id: 'issueName', content: '发行人/最终债务人', minWidth: '150' },
        { id: 'issueInnerGrade', content: '发行人内部评级', minWidth: '130' },
        { id: 'limitBanlance', content: '限额(亿)', minWidth: '80' },
        { id: 'remainPeriod', content: '期限(年)', minWidth: '80' },
        { id: 'conform', content: '是否符合期限要求', minWidth: '130' },
        { id: 'creditRemainBanlace', content: '信用分级授权剩余额度(亿)', minWidth: '200' },
        { id: 'ruleRemainBanlace', content: '法定要求剩余额度(亿)', minWidth: '170' }, // 公募
        { id: 'remainBanlace', content: '剩余额度(孰小)', minWidth: '120' }, // 公募
    ];

    private page: pages = {
        currentPage: 1,
        pageSize: 25,
        total: 0,
    };

    searchParam: any = {
        date: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
        stockCode: '',
        issueCode: '',
    }; // 查询条件

    loading: boolean = false; // 页面渲染

    tableKey: number = -1;

    isFirst: boolean = true;
    @Watch('activeValue', { immediate: true })
    handleActiveValue() {
        if (this.activeValue === 'special') {
            this.isFirst && this.getTableData();
            this.isFirst = false;
        }
    }

    getTableData(): void {
        this.loading = true;
        this.$axios
            .post('/credit/query/special', {
                ...this.searchParam,
                date: parseInt(this.searchParam.date),
                paging: this.page,
            })
            .then((res: any) => {
                this.tableData = res.list;
                // this.tableData = [
                //     {
                //         stockCode: '1212',
                //         stockName: '思考的思考的方式加快递费就是接口东方闪电',
                //         issueName: '看电视剧可能是快递费你是电风扇防守打法',
                //     },
                // ];
                this.page.total = res.total;
                this.loading = false;
            })
            .catch(() => {
                this.loading = false;
            });
    }

    handleButton(type): void {
        if (type == 'search') {
            this.pageChange(1);
        } else if (type == 'loadout') {
            downLoadFile({
                url: '/credit/list/exportSpecial',
                method: 'post',
                data: this.searchParam,
            });
        }
    }

    // 查询返回
    comReturn(obj) {
        this.searchParam = obj.searchParam;
    }

    // 分页返回
    pageRet() {
        this.getTableData();
    }

    // 分页
    pageChange(curPage: number): void {
        this.page.currentPage = curPage;
        this.getTableData();
    }

    beforeUpdate() {
        this.$nextTick(() => {
            // 在数据加载完，重新渲染表格
            (this.$refs['table'] as any).doLayout();
        });
    }

    handleHeaderStyle({ row, column, rowIndex, columnIndex }) {
        let sty = { background: '#d8d3d3', borderColor: '#d7d7d7', padding: '4px 0', textAlign: 'center' };
        if (['信用分级授权剩余额度(亿)', '法定要求剩余额度(亿)', '剩余额度(孰小)'].includes(column.label)) {
            return { ...sty, background: '#96bee6' };
        }
        return { ...sty };
    }
}
</script>
<style lang="scss" scoped></style>
